<template>
  <PublicLoading v-if="loading.mounted" />
  <div v-else class="dt-content-page">
    <dl class="dt-pmDetail-info">
      <dt>
        <h2>{{ projectDetail.projectName }}</h2>
        <!-- 先判断isMaster是否可以编辑，在判断demandid是否存在,在进行编辑 -->
        <el-button v-if="projectDetail.isMaster" class="dt-detail-button" type="primary" size="mini" @click="goEditPm">编辑项目信息</el-button>
        <el-button v-else class="dt-detail-button" type="primary" size="mini" @click="noPermission">编辑项目信息</el-button>
      </dt>
      <dd v-if="!projectDetail.description" class="dt-line-height dt-no-content">暂无内容</dd>
      <dd v-else class="dt-line-height" v-html="projectDetail.description"></dd>
    </dl>
    <dl class="dt-pmDetail-info">
      <dt>
        <h3>工作内容</h3>
      </dt>
      <dd v-if="!projectDetail.workContent" class="dt-line-height dt-no-content">暂无内容</dd>
      <dd v-else class="dt-line-height" v-html="projectDetail.workContent"></dd>
    </dl>
    <dl class="dt-pmDetail-info">
      <dt>
        <h3>项目信息</h3>
      </dt>
      <dd class="dt-pm-info">
        <span>项目产值：{{ projectDetail.output===null ? '***' :$tools.moneyLower(projectDetail.output)+'元'}}</span>
        <span>剩余产值：{{ projectDetail.remainOutput===null ? '***':$tools.moneyLower(projectDetail.remainOutput)+'元'}}</span>
        <span>计划工期：{{ projectDetail.startTime ? projectDetail.startTime.split(' ')[0] : '' }} 至
          {{ projectDetail.endTime ? projectDetail.endTime.split(' ')[0] : '' }}
          共{{ projectDetail.totalDays }}天，
          <!-- remainDays("状态为【进行中】，>0，表示剩余天数；<0，表示延期天数）")
          aheadDays("状态为【已完成】，>0，表示提前天数；<0，表示延期天数；=0，表示卡在截止时间完成") -->
          <template v-if="projectDetail.projectState==2">
            <span v-if="projectDetail.aheadDays > 0" class="inAdvance">提前{{ projectDetail.aheadDays }}天</span>
            <span v-if="projectDetail.aheadDays < 0" class="postpone">延期{{ Math.abs(projectDetail.aheadDays) }}天</span>
          </template>
          <template v-else>
            <span v-if="projectDetail.aheadDays == 0 && projectDetail.remainDays < 0"
              class="postpone">延期{{ Math.abs(projectDetail.remainDays) }}天</span>
            <span v-else>剩余{{ projectDetail.remainDays }}天</span>
          </template>
        </span>

        <span>任务数量：{{ projectDetail.taskCount }}</span>
      </dd>
    </dl>
    <dl class="dt-pmDetail-info table">
      <dt>
        <h3>项目生产成员</h3>
      </dt>
      <dd class="custom-table" :class="{ empty: tableData.length == 0 }">
        <PublicEmpty v-if="tableData.length == 0" :ishowImage="true" />
        <el-table v-else :data="tableData" style="width: 100%" :border="true" :span-method="objectSpanMethod(tableData)">
          <el-table-column label="序号" width="80">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="professionName" label="专业名称" min-width="239"> </el-table-column>
          <el-table-column prop="userName" label="姓名" min-width="148">
            <template slot-scope="scope">
              <span>{{ scope.row.userName || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="position" label="职位" min-width="242">
            <template slot-scope="scope">
              <span>{{ scope.row.position || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="职称" min-width="242">
            <template slot-scope="scope">
              <div>
                <div class="dt-operate" v-show="!scope.row.isOpenEdit">
                  <span v-if="scope.row.title">{{ scope.row.title }}</span>
                  <span v-else style="color: #909399">暂无</span>
                  <el-button v-if="projectDetail.setTitlePower" type="text"
                    @click.prevent="openEdit(scope.$index, scope.row.isOpenEdit)">编辑</el-button>

                </div>
                <div v-show="scope.row.isOpenEdit" class="dt-operate-edit">
                  <el-input v-model.trim="scope.row.title" placeholder="请输入职称" maxlength="20" size="mini" style="width: 180px"></el-input>
                  <el-button type="primary" icon="el-icon-check" @click="submitEdit(scope.$index, scope.row)"></el-button>
                  <el-button type="primary" icon="el-icon-close" @click="closeEdit(scope.$index, scope.row)"></el-button>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="联系电话" min-width="168">
            <template slot-scope="scope">
              <span>{{ scope.row.phone || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" min-width="388">
            <template slot-scope="scope">
              <div class="dt-operate" v-if="!scope.row.isRemarkEdit">
                <span v-if="scope.row.remark">{{ scope.row.remark }}</span>
                <span v-else style="color: #909399">暂无</span>
                <el-button v-if="projectDetail.setRemarkPower" type="text" @click="openRemark(scope.$index, scope.row)">编辑</el-button>
              </div>
              <div v-else class="dt-operate-edit">
                <el-input v-model.trim="scope.row.remark" placeholder="请输入备注" maxlength="20" size="mini" style="width: 320px"></el-input>
                <el-button type="primary" icon="el-icon-check" @click="submitRemark(scope.$index, scope.row)"></el-button>
                <el-button type="primary" icon="el-icon-close" @click="closeRemark(scope.$index, scope.row)"></el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </dd>
    </dl>
  </div>
</template>
<script>
export default {
  data() {
    return {
      uid: this.$tools.getDecrypt(this.$store.state.uid), //用户id
      loading: { mounted: false },
      projectDetail: {},
      tableData: []
    }
  },
  computed: {
    query() {
      return this.$tools.getQuery(this)
    }
  },
  methods: {
    objectSpanMethod(data) {
      return ({ row, column, rowIndex, columnIndex }) => {
        if (columnIndex === 1) {
          const prevRow = data[rowIndex - 1]
          if (prevRow && row.professionName === prevRow.professionName) {
            return {
              rowspan: 0,
              colspan: 1
            }
          } else {
            let rowspan = 1
            for (let i = rowIndex + 1; i < data.length; i++) {
              if (data[i].professionName === row.professionName) {
                rowspan++
              } else {
                break
              }
            }
            return {
              rowspan,
              colspan: 1
            }
          }
        }
      }
    },
    goEditPm() {
      var data = { elTab: '0-0', rootProjectId: this.query.rootProjectId }
      this.$router.push('/main/#/pm?tab=detail&' + this.$qs.stringify(data))
    },
    noPermission() {
      this.$alert('暂无权限，无法编辑项目信息', '提示', {
        confirmButtonText: '确定',
        type: 'warning',
        callback: (action) => {
          // this.$message({
          //   type: 'info',
          //   message: `action: ${action}`
          // })
        }
      })
    },
    getProjectDetail() {
      var data = [
          {
            userId: this.uid,
            rootProjectId: this.query.rootProjectId
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/project/projectDetail'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.projectDetail = data.data
              // var members = data.data.members
              //   .sort((a, b) => {
              //     if (a.professionName < b.professionName) return -1
              //     if (a.namprofessionNamee > b.professionName) return 1
              //     return 0
              //   })
              //   .reverse()
              var members = data.data.members
              this.tableData = members.map((item) => {
                return {
                  ...item,
                  isOpenEdit: 0,
                  isRemarkEdit: 0
                }
              })
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    openEdit(index) {
      this.tableData[index].isOpenEdit = 1
    },
    submitPostEdit(index, row) {
      var data = [
          {
            userId: this.uid,
            rootProjectId: this.query.rootProjectId,
            selectedUserId: row.userId,
            title: row.title
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/project/setTitle'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.tableData[index].isOpenEdit = 0
              this.getProjectDetail()
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    submitEdit(index, row) {
      this.submitPostEdit(index, row)
    },
    closeEdit(index) {
      this.tableData[index].isOpenEdit = 0
    },
    openRemark(index) {
      this.tableData[index].isRemarkEdit = 1
    },
    submitPostRemark(index, row) {
      var data = [
          {
            userId: this.uid,
            rootProjectId: this.query.rootProjectId,
            masterId: row.id,
            remark: row.remark
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/project/setRemark'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.tableData[index].isRemarkEdit = 0
              this.getProjectDetail()
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    submitRemark(index, row) {
      this.submitPostRemark(index, row)
    },
    closeRemark(index) {
      this.tableData[index].isRemarkEdit = 0
    }
  },
  mounted() {
    if (this.query.rootProjectId) {
      this.getProjectDetail()
    }
  }
}
</script>
<style scoped>
.dt-no-content {
  text-align: left;
  color: #999;
}
.dt-detail-button.el-button {
  width: 108px;
}
.dt-content-page {
  margin-top: 0px;
  background: #f2f3f5;
}
.dt-pmDetail-info dt {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.dt-pmDetail-info h2,
.dt-pmDetail-info h3 {
  font-size: 16px;
  /* margin: 16px 0px 12px; */
  margin: 24px 0px 14px;
}
.dt-pmDetail-info h2 {
  margin: 20px 0px;
  font-size: 20px;
}
.dt-pmDetail-info dd {
  padding: 14px;
  background: #fff;
}
.dt-pmDetail-info.table {
  flex: 1;
}
.dt-pm-info span {
  margin-right: 40px;
}

/* .dt-operate-edit, */
.dt-operate {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.dt-line-height {
  white-space: pre-line;
  line-height: 22px;
}
.custom-table {
  flex: 1;
}
.custom-table.empty {
  display: flex;
  justify-content: center;
}

.custom-table >>> .el-button {
  margin-left: 6px;
}
.dt-operate-edit >>> .el-button {
  width: 26px;
  height: 26px;
}
.el-button--text {
  font-size: 12px;
}

.custom-table >>> .el-table .el-table__cell {
  padding: 4px 0px;
  font-size: 12px;
}
.custom-table >>> .el-table__body-wrapper {
  color: #1f1f1f;
}
.custom-table >>> .el-table__header th {
  background-color: #fafafa;
}
.custom-table >>> .el-button {
  padding: 0px;
}

.inAdvance {
  color: #52c41a;
}
.postpone {
  color: #f5222d;
}
</style>
